<template>
  <div class="app-container">
    <div class="inner-container">
      <el-upload
        ref="uploadExcel"
        class="upload-demo"
        :action="upLoadUrl"
        accept=".xls,.xlsx"
        :auto-upload="true"
        :on-success="fileUploadSuccess"
        :before-upload="beforeFileUpload"
      >
        <el-button size="small" type="primary" style="margin: 15px 15px">选择导入文件</el-button>
      </el-upload>
      <el-button type="primary" style="margin: 15px 15px" @click="downloadFile">导出文件</el-button>
    </div>
  </div>
</template>
<script>
import { $gc } from 'gc-starter-ui-plus'
export default {
  data() {
    return {
      form: {
        file: ''
      },
      upLoadUrl: '',
      fileList: []
    }
  },
  mounted() {
    this.upLoadUrl = window.SITE_CONFIG['baseUrl'] + '/import?token=' + $gc.$cookie.get('token')
  },
  methods: {
    fileUploadSuccess(response, file, fileList) {
      const fileNameType = file.name.substring(file.name.lastIndexOf('.') + 1)
      if (fileNameType === 'xls' || fileNameType === 'xlsx') {
        this.$notify.success({
          title: '成功',
          message: `文件上传成功`
        })
      }
    },
    downloadFile() {
      window.location = window.SITE_CONFIG['baseUrl'] + '/export'
    },
    beforeFileUpload(file) {
      const fileName = file.name.substring(file.name.lastIndexOf('.') + 1)
      const extension = fileName === 'xls'
      const extension2 = fileName === 'xlsx'
      if (!extension && !extension2) {
        this.$message({
          message: '上传文件只能是 xls、xlsx格式!',
          type: 'warning'
        })
        return false
      }
    }
  }
}
</script>

